<template>
  <div>
    <el-card class="box-card" style="margin-bottom:10px;position:relative;">
      <el-tabs v-model="activeTab" :before-leave="actionBeforTabLeave">
        <el-tab-pane label="端口" name="port">
          <port-management></port-management>
        </el-tab-pane>
        <el-tab-pane label="传输" name="trans">
          <interface-data-trans ref="interface"></interface-data-trans>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import PortManagement from './PortManagement.vue'
import InterfaceDataTrans from './InterfaceDataTrans.vue'
export default {
    components : {
        'port-management' : PortManagement,
        'interface-data-trans' : InterfaceDataTrans,
    },
    data() {
        return {
            activeTab : 'port',
        };
    },
    methods : {
        /** tab 切换 */
        async actionBeforTabLeave( activeName ) {
            if ( 'trans' != activeName ) {
                this.$refs.interface.stop();
            } else {
                this.$refs.interface.start();
            }
        },
    },
}
</script>